/*
 * @Author: 18163104359 2205227953@qq.com
 * @Date: 2024-01-25 15:20:46
 * @LastEditors: NaturalHulk 2066634567@qq.com
 * @LastEditTime: 2024-02-19 09:59:55
 * @FilePath: /umi/src/pages/system/menu/form.jsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import React, { useState, useEffect, forwardRef } from "react";
import { Form, Tree, Input } from "antd";
import { handleTree } from "@/utils/ruoyi.js";
import { GetMenuPageAPI } from "@/api/system/printConfig";
const { DirectoryTree } = Tree;
const { TextArea } = Input;
// 子组件forwardRef 防止时机不对找不到子组件的ref
const FormPage = forwardRef((props, ref) => {
  const { title, data } = props;

  const [treeData, setTreeData] = useState([]);

  // 表单数据
  const [formValue] = Form.useForm();
  // 监听表单数据变化 useWatch

  // 初始化数据
  const initData = () => {
    formValue.setFieldsValue(data);
  };

  // 获取菜单信息
  const getMenuList = async () => {
    const { data: result } = await GetMenuPageAPI();
    setTreeData(result);
  };

  // sad
  const onSelect = (val) => {
    console.log(val);
  };

  useEffect(() => {
    initData();
    getMenuList();
  }, []);

  return (
    <Form
      form={formValue}
      ref={ref}
      labelCol={{
        span: 8,
      }}
      wrapperCol={{
        span: 10,
      }}
      initialValues={{
        remember: true,
      }}
      autoComplete="off"
    >
      <Form.Item
        disabled={title == "查看"}
        label="模版名称"
        name="printName"
        rules={[
          {
            required: true,
            message: "请填写模版名称",
          },
        ]}
      >
        <Input placeholder="请填写模版名称" />
      </Form.Item>
      <Form.Item
        disabled={title == "查看"}
        label="关联位置"
        name="printCorrelationName"
        rules={[
          {
            required: true,
            message: "请选择关联位置",
          },
        ]}
      >
        <DirectoryTree
          onSelect={onSelect}
          fieldNames={{ title: "menuName", key: "menuId", children: "children" }}
          multiple
          defaultExpandAll
          treeData={treeData}
        />
      </Form.Item>
    </Form>
  );
});
export default FormPage;
